<template>
  <div class="hospital-intro">
    <div class="section-title">医院介绍</div>
    <div class="intro-content">
      <p v-if="hospital.intro" class="intro-text" :class="{ 'collapsed': collapsed }">
        {{ hospital.intro }}
      </p>
      <p v-else class="intro-text">暂无医院介绍信息</p>
      
      <div v-if="hospital.intro && hospital.intro.length > 100" class="toggle-btn" @click="toggleCollapse">
        {{ collapsed ? '展开' : '收起' }}
        <van-icon :name="collapsed ? 'arrow-down' : 'arrow-up'" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface HospitalIntroProps {
  hospital: {
    id: number
    intro?: string
  }
}

const props = defineProps<HospitalIntroProps>()
const collapsed = ref(true)

const toggleCollapse = () => {
  collapsed.value = !collapsed.value
}
</script>

<style scoped lang="scss">
.hospital-intro {
  background: #fff;
  padding: 16px;
  margin-bottom: 8px;
  
  .section-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 12px;
  }
  
  .intro-content {
    .intro-text {
      font-size: 14px;
      color: #666;
      line-height: 1.6;
      margin: 0;
      
      &.collapsed {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    
    .toggle-btn {
      text-align: center;
      color: #1890FF;
      font-size: 14px;
      margin-top: 8px;
      
      .van-icon {
        vertical-align: -2px;
      }
    }
  }
}
</style> 